<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  
  <title itemprop="name">Hexo Sakura使用教程 | 六六の小屋</title>
  
    <link rel="shortcut icon" href="/images/favicon.ico">
  
  <meta http-equiv="x-dns-prefetch-control" content="on">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+SerifMerriweather|Merriweather+Sans|Source+Code+Pro|Ubuntu:400,700|Noto+Serif+SC" media="all">
  <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
  <link rel="stylesheet" id="saukra_css-css" href="/css/style.css" type="text/css" media="all">
  <link rel="stylesheet" href="/css/lib.min.css" media="all">
  <link rel="stylesheet" href="/css/font.css" media="all">
  <link rel="stylesheet" href="/css/insight.css" media="all">
  <link rel="stylesheet" href="/css/jquery.fancybox.min.css" media="all">
  <link rel="stylesheet" href="/css/zoom.css" media="all">
  <link rel="stylesheet" type="text/css" href="/css/sharejs.css">
<!--   <link rel="stylesheet" id="saukra_css-css" href="https://2heng.xin/wp-content/cache/autoptimize/css/autoptimize_ad42a61f4c7d4bdd9f91afcff6b5dda5.css
" type="text/css" media="all"> -->
  <script>
  /*Initial Variables*/
  var mashiro_option = new Object();
  var mashiro_global = new Object();
  mashiro_option.NProgressON = true;
  /* 
   * 邮箱信息之类的东西可以填在这里，这些js变量基本都作用于sakura-app.js
   * 这样的设置仅是为了方便在基于PHP开发的主题中设置js变量，既然移植到了Node上，我想或许可以精简这一逻辑吧
   */
  mashiro_option.email_domain = "";
  mashiro_option.email_name = "";
  mashiro_option.cookie_version_control = "";
  mashiro_option.qzone_autocomplete = false;
  mashiro_option.site_name = "六六の小屋";
  mashiro_option.author_name = "六六の小屋";
  mashiro_option.site_url = "https://aill.gitee.io/";
  mashiro_option.v_appId = "4L0A8uj9wCovgVFfLu7xHuGi-gzGzoHsz";
  mashiro_option.v_appKey = "MJiSk3Pctl8GKzoA3n1dGLQJ";
  mashiro_option.mathjax = "0";
  mashiro_option.qq_api_url = "https://api.mashiro.top/qqinfo/"; 
  mashiro_option.qq_avatar_api_url = "https://api.mashiro.top/qqinfo/";

  // mashiro_option.jsdelivr_css_src = "https://cdn.jsdelivr.net/gh/moezx/cdn@3.4.5/css/lib.min.css";
  // mashiro_option.float_player_on = true;

  /*End of Initial Variables*/
  </script>
  <script type="text/javascript">
  var bg = "/images/bg/1.jpg,/images/bg/2.jpg".split(",");
  var bgindex = Math.floor(Math.random()*bg.length);
  if (!!window.ActiveXObject || "ActiveXObject" in window) { //is IE?
    alert('朋友，IE浏览器未适配哦~');
  }
  </script>
  <style type="text/css">
  .hljs-ln{border-collapse:collapse}.hljs-ln td{padding:0}.hljs-ln-n:before{content:attr(data-line-number)}
  </style>
  <style type="text/css">.site-top .lower nav{display:block !important;}.author-profile i,.post-like a,.post-share .show-share,.sub-text,.we-info a,span.sitename,.post-more i:hover,#pagination a:hover,.post-content a:hover,.float-content i:hover{color:#FE9600}.feature i,.download,.navigator i:hover,.links ul li:before,.ar-time i,span.ar-circle,.object,.comment .comment-reply-link,.siren-checkbox-radio:checked + .siren-checkbox-radioInput:after{background:#FE9600}::-webkit-scrollbar-thumb{background:#FE9600}.download,.navigator i:hover,.link-title,.links ul li:hover,#pagination a:hover,.comment-respond input[type='submit']:hover{border-color:#FE9600}.entry-content a:hover,.site-info a:hover,.comment h4 a,#comments-navi a.prev,#comments-navi a.next,.comment h4 a:hover,.site-top ul li a:hover,.entry-title a:hover,#archives-temp h3,span.page-numbers.current,.sorry li a:hover,.site-title a:hover,i.iconfont.js-toggle-search.iconsearch:hover,.comment-respond input[type='submit']:hover{color:#FE9600}.comments .comments-main{display:block !important;}.comments .comments-hidden{display:none !important;}background-position:center center;background-attachment:inherit;}
  </style>
<meta name="generator" content="Hexo 5.0.0"></head>


<body
  class="page-template page-template-user page-template-page-analytics page-template-userpage-analytics-php page page-id-1297 chinese-font serif isWebKit">
  <div class="scrollbar" id="bar">
  </div>
  <a href="#" class="cd-top faa-float animated"></a>
  <section id="main-container">
    <div class="headertop filter-dot">
  <div id="banner_wave_1"></div>
  <div id="banner_wave_2"></div>
  <figure id="centerbg" class="centerbg">
    <div class="focusinfo no-select">
      <div class="header-tou">
        <a target="_blank" rel="noopener" href="https://aill.gitee.io/">
          <img src="/images/avatar.png">
        </a>
      </div>
      <div class="header-info">
        <p>不积跬步,无以至千里!</p>
        <div class="top-social_v2">
          <li id="bg-pre">
            <img class="flipx" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/next-b.svg">
          </li>
          
            
              
                <li>
                  <a href="https://wpa.qq.com/msgrd?v=3&amp;uin=2403988624&amp;site=qq&amp;menu=yes" target="_blank" class="social-github" title="qq">
                    <img src="/images/social/qq.png">
                  </a>
                </li>
              
            
              
                <li class="wechat">
                  <a href="/#">
                    <img src="/images/social/wechat.png">
                  </a>
                  <div class="wechatInner">
                    <img src="/images/donate/wechat.jpg">
                  </div>
                </li>
              
            
              
                <li>
                  <a href="https://space.bilibili.com/13503064" target="_blank" class="social-github" title="bilibili">
                    <img src="/images/social/bilibili.png">
                  </a>
                </li>
              
            
              
                <li>
                  <a href="https://weibo.com/u/3125196513?refer_flag=1001030103_&amp;is_all=1" target="_blank" class="social-github" title="weibo">
                    <img src="/images/social/weibo.png">
                  </a>
                </li>
              
            
          
          <li id="bg-next">
            <img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/next-b.svg">
          </li>
        </div>
      </div>
    </div>
  </figure>
  <div id="video-container" style="">
    <video style="object-fit: fill" id="bgvideo" class="video" video-name="" src="" width="auto" preload="auto">
    </video>
    <div id="video-btn" class="loadvideo videolive">
    </div>
    <div id="video-add">
    </div>
    <div class="video-stu">
    </div>
  </div>
  <div class="headertop-down faa-float animated" onclick="headertop_down()">
    <span>
      <i class="fa fa-chevron-down" aria-hidden="true">
      </i>
    </span>
  </div>
</div>
    <div id="page" class="site wrapper">
      <header class="site-header no-select gizle sabit" role="banner">
  <div class="site-top">
    <div class="site-branding">
      <span class="site-title">
        <span class="logolink moe-mashiro">
          <a href="/">
            <!-- <span class="sakurasono"></span> -->
            <span class="shironeko">六六の小屋</span>
          </a>
        </span>
      </span>
    </div>
    <div class="searchbox search-form-submit">
      <i class="iconfont js-toggle-search iconsearch icon-search">
      </i>
    </div>
    <div id="show-nav" class="showNav mobile-fit">
      <div class="line line1">
      </div>
      <div class="line line2">
      </div>
      <div class="line line3">
      </div>
    </div>
    <div class="lower-cantiner">
      <div class="lower">
        <nav class="mobile-fit-control hide">
          <ul id="menu-new" class="menu">
            
              <li>
                <a href="/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-fort-awesome faa-shake" aria-hidden="true"></i>
                    首页
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="javascript:;">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-folder-open faa-wrench" aria-hidden="true"></i>
                    分类
                  </span>
                </a>
                
                  <ul class="sub-menu">
                    
                      <li>
                        <a href="/categories/%E6%8A%80%E6%9C%AF/">
                          <i class="fa fa-code" aria-hidden="true"></i>
                          技术
                        </a>
                      </li>
                    
                      <li>
                        <a href="/categories/%E7%94%9F%E6%B4%BB/">
                          <i class="fa fa-file-text-o" aria-hidden="true"></i>
                          生活
                        </a>
                      </li>
                    
                      <li>
                        <a href="/categories/%E8%B5%84%E6%BA%90/">
                          <i class="fa fa-cloud-download" aria-hidden="true"></i>
                          资源
                        </a>
                      </li>
                    
                      <li>
                        <a href="/categories/%E9%9A%8F%E6%83%B3/">
                          <i class="fa fa-commenting-o" aria-hidden="true"></i>
                          随想
                        </a>
                      </li>
                    
                  </ul>
                
              </li>
            
              <li>
                <a href="javascript:;">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-list-ul faa-vertical" aria-hidden="true"></i>
                    兴趣
                  </span>
                </a>
                
                  <ul class="sub-menu">
                    
                      <li>
                        <a href="/tags/%E6%82%A6%E8%AF%BB/">
                          <i class="fa fa-book" aria-hidden="true"></i>
                          书单
                        </a>
                      </li>
                    
                      <li>
                        <a href="/bangumi/">
                          <i class="fa fa-film" aria-hidden="true"></i>
                          番组
                        </a>
                      </li>
                    
                      <li>
                        <a href="/music/">
                          <i class="fa fa-headphones" aria-hidden="true"></i>
                          歌单
                        </a>
                      </li>
                    
                      <li>
                        <a href="/photos/">
                          <i class="fa fa-photo" aria-hidden="true"></i>
                          图集
                        </a>
                      </li>
                    
                  </ul>
                
              </li>
            
              <li>
                <a href="/archives/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-calendar-times-o faa-tada" aria-hidden="true"></i>
                    时间轴
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/comment/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-pencil-square-o faa-tada" aria-hidden="true"></i>
                    留言板
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/links/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-link faa-shake" aria-hidden="true"></i>
                    友人帐
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/donate/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-thumbs-up faa-shake" aria-hidden="true"></i>
                    赞赏
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/about/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-leaf faa-wrench" aria-hidden="true"></i>
                    关于
                  </span>
                </a>
                
                  <ul class="sub-menu">
                    
                      <li>
                        <a href="/./love/">
                          <i class="fa fa-heart" aria-hidden="true"></i>
                          唯爱
                        </a>
                      </li>
                    
                      <li>
                        <a href="/lab/">
                          <i class="fa fa-cogs" aria-hidden="true"></i>
                          Lab
                        </a>
                      </li>
                    
                  </ul>
                
              </li>
            
              <li>
                <a href="/client/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-android faa-vertical" aria-hidden="true"></i>
                    APP
                  </span>
                </a>
                
              </li>
            
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

      <link rel="stylesheet" type="text/css" href="/css/sharejs.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css">
<div class="pattern-center-blank"></div>

  <div class="pattern-center single-center">
    <!-- 有配图默认渲染第一张 -->
    <div class="pattern-attachment-img lazyload" style="background-image: url(/images/sakura/demo.png);" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg" data-src="/images/sakura/demo.png">
    </div>
    <header class="pattern-header single-header">
      <h1 class="entry-title">
      Hexo Sakura使用教程</h1>
      <p class="entry-census">
        <span>
          <a target="_blank" rel="noopener" href="https://aill.gitee.io">
            <img src="/images/avatar.png">
          </a>
        </span>
        <span>
          <a target="_blank" rel="noopener" href="https://aill.gitee.io">LiuLiu</a>
        </span>
        <span class="bull">
        ·</span>
        2020-8-3<span class="bull">
        ·</span>
      <span id="busuanzi_value_page_pv"></span>次阅读</p>
    </header>
  </div>

<div id="content" class="site-content">
  <div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
      <article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
        <div class="toc"></div>
        <!--<div class="toc-entry-content"><!-- 套嵌目录使用（主要为了支援评论）-->
        
        <div class="entry-content">
          <h2 id="一-前言"><a href="#一-前言" class="headerlink" title="一.前言"></a>一.前言</h2><ul>
<li>搭建了自己的博客后，肯定需要美化，打造属于自己的个性博客，但是百度上面好多大神发的教程比较散，我尝试了以后汇总了一下分享给大家</li>
</ul>
<h2 id="二-主题模块"><a href="#二-主题模块" class="headerlink" title="二.主题模块"></a>二.主题模块</h2><h3 id="1-默认主题"><a href="#1-默认主题" class="headerlink" title="1. 默认主题"></a>1. 默认主题</h3><p>一般默认安装的主题是一个 landscape 主题，但是不是很好看，而且hexo的主题特别多，都挺漂亮的，我们可以选择更改</p>
<blockquote>
<p>hexo官方主题：<a target="_blank" rel="noopener" href="https://hexo.io/themes/">https://hexo.io/themes/</a></p>
</blockquote>
<h3 id="2-推荐主题"><a href="#2-推荐主题" class="headerlink" title="2. 推荐主题"></a>2. 推荐主题</h3><p>给大家推荐一个主题 sakura，我搭建的主题就是这个，效果还是挺不错的,<a target="_blank" rel="noopener" href="https://github.com/honjun/hexo-theme-sakura" title="sakura">sakura</a>下载链接</p>
<h3 id="3-配置主题"><a href="#3-配置主题" class="headerlink" title="3. 配置主题"></a>3. 配置主题</h3><p>下载之后，我们将 <strong>hexo-theme-sakura-master</strong> 中的主题样式复制到 根目录下的 <strong>theme</strong> 目录下<br>也可以更改 <strong>hexo-theme-sakura-master</strong> 为 <strong>Sakura</strong> ，方便配置使用</p>
<h3 id="4-修改配置文件"><a href="#4-修改配置文件" class="headerlink" title="4. 修改配置文件"></a>4. 修改配置文件</h3><p>修改根目录下的配置文件 _config.yml</p>
<ul>
<li>注意<br>theme： sakura <em>//此处的主题名要和theme文件夹下主题名一致</em></li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"># Extensions</span><br><span class="line">## Plugins: https:&#x2F;&#x2F;hexo.io&#x2F;plugins&#x2F;</span><br><span class="line">## Themes: https:&#x2F;&#x2F;hexo.io&#x2F;themes&#x2F;</span><br><span class="line">theme: Sakura </span><br></pre></td></tr></table></figure>
<h3 id="5-重新运行测试-查看效果"><a href="#5-重新运行测试-查看效果" class="headerlink" title="5. 重新运行测试,查看效果"></a>5. 重新运行测试,查看效果</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo g</span><br><span class="line">hexo s</span><br></pre></td></tr></table></figure>
<h2 id="三-顶部站点名"><a href="#三-顶部站点名" class="headerlink" title="三.顶部站点名"></a>三.顶部站点名</h2><p>这个是在 <strong>/themes/sakura/config.yml</strong> 这个配置文件中修改</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">//site name</span><br><span class="line">prefixName: 六六の网站</span><br><span class="line">siteName: LiuLiu</span><br><span class="line">url: https://aill.github.io/ </span><br></pre></td></tr></table></figure>
<ul>
<li>其中，URL是点击后跳转地址.</li>
<li>由于我在 <strong>/themes/sakura/source/css/style.css</strong> 下修改了样式表去掉了prefixName，所以本站没有</li>
<li>大家如果想修改其相关的样式也可以去这个css文件中自定义,这个文件是主要的css文件，大部分的样式都是由这个文件定义的。</li>
</ul>
<h2 id="四-顶部导航栏"><a href="#四-顶部导航栏" class="headerlink" title="四. 顶部导航栏"></a>四. 顶部导航栏</h2><p>这个在主题使用教程里面，作者好像已经是给出来了，大家可以仔细去阅读以下(当初我就是没有认真阅读爬了不少坑)<br>这也是 <strong>/themes/sakura/config.yml</strong> 这个配置文件里面定义的</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">menus:</span><br><span class="line">  首页: &#123; path: /, fa: fas fa-home  fa-1x &#125;</span><br><span class="line">  分类: &#123; path: javascript:;, fa: far fa-folder-open, submenus: &#123; </span><br><span class="line"><span class="code">    技术: &#123;path: /categories/技术/, fa: fab fa-windows &#125;, </span></span><br><span class="line"><span class="code">    生活: &#123;path: /categories/生活/, fa: fa-book &#125;, </span></span><br><span class="line"><span class="code">    资源: &#123;path: /categories/资源/, fa: fa-cloud-download &#125;, </span></span><br><span class="line"><span class="code">    随想: &#123;path: /categories/随想/, fa: fa-commenting-o &#125;,</span></span><br><span class="line"><span class="code">  &#125; &#125;</span></span><br><span class="line"><span class="code">  兴趣: &#123; path: javascript:;, fa: fas fa-tasks,submenus: &#123; </span></span><br><span class="line"><span class="code">    书单: &#123;path: /tags/悦读/, fa: fa-th-list faa-bounce &#125;, </span></span><br><span class="line"><span class="code">    番组: &#123;path: /bangumi/, fa: fa-film faa-vertical &#125;, </span></span><br><span class="line"><span class="code">    歌单: &#123;path: /music/, fa: fa-headphones &#125;,</span></span><br><span class="line"><span class="code">    图集: &#123;path: /tags/图集/, fa: fa-photo &#125;</span></span><br><span class="line"><span class="code">  &#125; &#125;</span></span><br><span class="line"><span class="code">  时间轴: &#123; path: /archives, fa: far fa-folder-open &#125;</span></span><br><span class="line"><span class="code">  留言板: &#123; path: /comment/, fa: fa-pencil-square-o faa-tada &#125;</span></span><br><span class="line"><span class="code">  友人帐: &#123; path: /links/, fa: fa-link faa-shake &#125;</span></span><br><span class="line"><span class="code"></span></span><br></pre></td></tr></table></figure>
<ul>
<li>前面的path是网页路径，这个不建议修改，但可以修改。后面的如 <strong>fa: fa-film</strong>  这个就是对应的图标设置,关于这个图标大家可以去fontawesome看教程以及选择自己喜欢的图标，导航栏下拉下拉菜单的图标修改和导航栏相同。</li>
</ul>
<h2 id="五-头像"><a href="#五-头像" class="headerlink" title="五.头像"></a>五.头像</h2><p>很多小伙伴拿到主题后第一时间肯定是修改这个头像，毕竟这个比较能代表自己嘛，那么这个头像配置在哪(⊙o⊙)?<br>如果有经验的小伙伴肯定是自己就能找到，这个配置在 <strong>/themes/sakura/config.yml</strong> 中</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">cdn: https://cdn.jsdelivr.net/gh/yremp/cdn@2.1.5</span><br><span class="line">avatar: /images/custom/head.jpg</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>也可以修改为：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">avatar: https://cdn.jsdelivr.net/gh/yremp/cdn@2.1.5/img/custom/head.jpg</span><br></pre></td></tr></table></figure>
<ul>
<li>至于cdn：大家可以去百度cdn教程</li>
</ul>
<h2 id="六-社交栏"><a href="#六-社交栏" class="headerlink" title="六.社交栏"></a>六.社交栏</h2><blockquote>
<p><img src="/images/sakura/demo.png" alt="目录"></p>
</blockquote>
<h3 id="1-个性签名"><a href="#1-个性签名" class="headerlink" title="1.个性签名"></a>1.个性签名</h3><p>这个在 <strong>/themes/sakura/config.yml</strong> 里面，由如下代码定义，直接修改即可</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">description: 不积跬步，无以至千里！</span><br></pre></td></tr></table></figure>
<h3 id="2-内容"><a href="#2-内容" class="headerlink" title="2.内容"></a>2.内容</h3><p>没错，仍然是 <strong>/themes/sakura/config.yml</strong> 这个文件，找到</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">#social  url, img PC端配置</span><br><span class="line">#社交按钮(social)  url, img PC端配置</span><br><span class="line">social:</span><br><span class="line">  qq: &#123;url: https:&#x2F;&#x2F;wpa.qq.com&#x2F;msgrd?v&#x3D;3&amp;uin&#x3D;2403988624&amp;site&#x3D;qq&amp;menu&#x3D;yes, img: &#x2F;images&#x2F;social&#x2F;qq.png&#125;</span><br><span class="line">  wechat: &#123;url: &#x2F;#, qrcode: &#x2F;images&#x2F;donate&#x2F;wechat.jpg, img: &#x2F;images&#x2F;social&#x2F;wechat.png&#125;</span><br><span class="line">  bilibili: &#123;url: https:&#x2F;&#x2F;space.bilibili.com&#x2F;13503064, img: &#x2F;images&#x2F;social&#x2F;bilibili.png&#125;</span><br><span class="line">  weibo: &#123;url: https:&#x2F;&#x2F;weibo.com&#x2F;u&#x2F;3125196513?refer_flag&#x3D;1001030103_&amp;is_all&#x3D;1, img: &#x2F;images&#x2F;social&#x2F;weibo.png&#125;</span><br><span class="line">#social  url, img 移动端配置</span><br><span class="line"># 社交按钮(msocial)  url, img 移动端配置</span><br><span class="line">msocial:</span><br><span class="line">  qq: &#123;url: https:&#x2F;&#x2F;wpa.qq.com&#x2F;msgrd?v&#x3D;3&amp;uin&#x3D;2403988624&amp;site&#x3D;qq&amp;menu&#x3D;yes, fa: fa-qq, color: 25c6fe&#125;</span><br><span class="line">  bilibili: &#123;url: https:&#x2F;&#x2F;space.bilibili.com&#x2F;13503064, fa: fa-television, color: ffb6c1&#125;</span><br><span class="line">  weibo: &#123;url: https:&#x2F;&#x2F;weibo.com&#x2F;u&#x2F;3125196513?refer_flag&#x3D;1001030103_&amp;is_all&#x3D;1, fa: fa-weibo, color: dd4b39&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>前面URL对应点击后跳转地址，后面是图标路径，注意这个是本地路径，如果要使用cdn后的路径，上一栏 <strong>头像</strong> 设置中有介绍。至于pc和移动端注释已经标示了，就不多作介绍。</li>
</ul>
<h3 id="3-社交栏整体样式"><a href="#3-社交栏整体样式" class="headerlink" title="3.社交栏整体样式"></a>3.社交栏整体样式</h3><p>在 <strong>/themes/sakura/source/css/style.css</strong> 中 Ctrl+f 搜索 <strong>header-info</strong> ，这就是这个地方对应的div的class名字<br>就可以在代码中找到</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.header-info</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">63%</span>;</span><br><span class="line">    <span class="attribute">margin</span>: auto;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#eaeadf</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,.<span class="number">8</span>);</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">15px</span>;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">22px</span>;</span><br><span class="line">    <span class="attribute">letter-spacing</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">box-sizing</span>: initial;</span><br><span class="line">    <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.header-info</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">127.5px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">margin-left</span>: -<span class="number">15px</span>;</span><br><span class="line">    <span class="attribute">border-width</span>: <span class="number">15px</span>;</span><br><span class="line">    <span class="attribute">border-style</span>: solid;</span><br><span class="line">    <span class="attribute">border-color</span>: transparent transparent <span class="built_in">rgba</span>(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,.<span class="number">8</span>) transparent;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.header-info</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>:<span class="number">0</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#605f5f</span>;</span><br><span class="line">    <span class="attribute">font-family</span>:<span class="string">&#x27;Ubuntu&#x27;</span>,sans-serif;</span><br><span class="line">    <span class="attribute">font-weight</span>:<span class="number">700</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>这就是其对应的样式表内容，可以根据需要修改。(Chrome) 按F12然后点击你想查看的部分就会给你提示对应的部分。对应关系已经标出来，可以用这个功能快速找到网页和css对应关系，方便进行修改</li>
</ul>
<h2 id="七-顶部图片和效果"><a href="#七-顶部图片和效果" class="headerlink" title="七.顶部图片和效果"></a>七.顶部图片和效果</h2><h3 id="1-顶部图片"><a href="#1-顶部图片" class="headerlink" title="1.顶部图片"></a>1.顶部图片</h3><p>在 <strong>/themes/sakura/config.yml</strong> 中找到如下代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"># 背景图片 更好的修改</span><br><span class="line">bg:</span><br><span class="line">  - &#x2F;images&#x2F;bg&#x2F;1.jpg</span><br><span class="line">  - &#x2F;images&#x2F;bg&#x2F;2.jpg</span><br></pre></td></tr></table></figure>
<ul>
<li>注意这里是本地图片链接</li>
</ul>
<h3 id="2-顶部图片效果"><a href="#2-顶部图片效果" class="headerlink" title="2.顶部图片效果"></a>2.顶部图片效果</h3><p>我的顶部效果改为了点点，可根据需要修改在：<br>在 <strong>/themes/sakura/config.yml</strong> 中找到如下代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"># 背景图片样式 空：原图 filter-dim：阴影 filter-grid：横条 filter-dot：点点</span><br><span class="line">bgclass: filter-dot</span><br></pre></td></tr></table></figure>
<ul>
<li>具体参数原作者在注释中已经标示</li>
</ul>
<h2 id="八-通知栏"><a href="#八-通知栏" class="headerlink" title="八.通知栏"></a>八.通知栏</h2><p>还是在 <strong>/themes/sakura/config.yml</strong> 中找到如下代码,直接修改内容即可</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">#站点首页的公告信息</span><br><span class="line">notice: 欢迎来到六六の小屋，感谢您的光临！！...</span><br></pre></td></tr></table></figure>

<h2 id="九-模块"><a href="#九-模块" class="headerlink" title="九.模块"></a>九.模块</h2><h3 id="1-startdash模块"><a href="#1-startdash模块" class="headerlink" title="1.startdash模块"></a>1.startdash模块</h3><p>在 <strong>/themes/sakura/layout/_partial/startdash.ejs</strong> 中有如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class&#x3D;&quot;top-feature-row&quot;&gt;</span><br><span class="line">  &lt;h1 class&#x3D;&quot;fes-title&quot; style&#x3D;&quot;font-family: &#39;Ubuntu&#39;, sans-serif;&quot;&gt;</span><br><span class="line">  &lt;i class&#x3D;&quot;fa fa-anchor&quot; aria-hidden&#x3D;&quot;true&quot;&gt;</span><br><span class="line">  &lt;&#x2F;i&gt;</span><br><span class="line">  兴趣&lt;&#x2F;h1&gt;</span><br><span class="line">  &lt;% for (dash in theme.startdash) &#123; %&gt;</span><br><span class="line">  ....</span><br></pre></td></tr></table></figure>
<h3 id="2-startdash内容设置"><a href="#2-startdash内容设置" class="headerlink" title="2.startdash内容设置"></a>2.startdash内容设置</h3><p>在 <strong>/themes/sakura/config.yml</strong> 中找到如下代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">startdash: </span><br><span class="line">  - &#123;url: &#x2F;, title: 亲爱的, desc: My Olny Love, img: &#x2F;images&#x2F;startdash&#x2F;love.png&#125;</span><br><span class="line">  - &#123;url: https:&#x2F;&#x2F;space.bilibili.com&#x2F;13503064, title: Bilibili, desc: 博主的b站视频, img: &#x2F;images&#x2F;startdash&#x2F;bilibili.jpg&#125;</span><br><span class="line">  - &#123;url: &#x2F;, title: 万事屋, desc: 技术服务, img: &#x2F;images&#x2F;startdash&#x2F;wangshiwu.jpg&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>注释也已经标示出其参数，根据参数修改即可。</li>
</ul>
<h3 id="3-Discovery文章"><a href="#3-Discovery文章" class="headerlink" title="3.Discovery文章"></a>3.Discovery文章</h3><p>在 <strong>/themes/sakura/layout/index.ejs</strong> 中找到如下代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1 class&#x3D;&quot;main-title&quot; style&#x3D;&quot;font-family: &#39;Ubuntu&#39;, sans-serif;&quot;&gt;</span><br><span class="line">&lt;i class&#x3D;&quot;fa fa-envira&quot; aria-hidden&#x3D;&quot;true&quot;&gt;&lt;&#x2F;i&gt;</span><br><span class="line">文章&lt;&#x2F;h1&gt;</span><br><span class="line">&lt;%- partial(&#39;_partial&#x2F;archive&#39;, &#123;pagination: 2, index: true&#125;) %&gt;</span><br><span class="line">&lt;!-- 首页默认取最最新文章集 --&gt;</span><br></pre></td></tr></table></figure>
<h2 id="十-文章封面和内容"><a href="#十-文章封面和内容" class="headerlink" title="十.文章封面和内容"></a>十.文章封面和内容</h2><h3 id="1-文章封面"><a href="#1-文章封面" class="headerlink" title="1.文章封面"></a>1.文章封面</h3><p>这个在在你写博客时，有photos属性，设置url即可 ，下面是示例，photos 就是文章的封面</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Hexo Sakura使用教程</span><br><span class="line">author: LiuLiu</span><br><span class="line">avatar: &#x2F;images&#x2F;avatar.png</span><br><span class="line">authorLink: https:&#x2F;&#x2F;aill.gitee.io</span><br><span class="line">authorAbout: 不积跬步，无以至千里！</span><br><span class="line">authorDesc: 不积跬步，无以至千里！</span><br><span class="line">categories: 技术</span><br><span class="line">comments: true</span><br><span class="line">keywords: Hexo教程</span><br><span class="line">description: Hexo教程</span><br><span class="line">photos: &#x2F;images&#x2F;sakura&#x2F;demo.png</span><br><span class="line">---</span><br></pre></td></tr></table></figure>
<h2 id="十一-分类及标签子页面"><a href="#十一-分类及标签子页面" class="headerlink" title="十一.分类及标签子页面"></a>十一.分类及标签子页面</h2><h3 id="1-分类子页面"><a href="#1-分类子页面" class="headerlink" title="1.分类子页面"></a>1.分类子页面</h3><p>相关的设置是在 <strong>/themes/sakura/language/zh-cn.yml</strong> 找到如下代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">技术:</span><br><span class="line">    #中文标题</span><br><span class="line">    zh: 技术协会</span><br><span class="line">    #英文标题</span><br><span class="line">    en: technology</span><br><span class="line">    # 封面图片</span><br><span class="line">    img: &#x2F;images&#x2F;classify&#x2F;coding.jpg</span><br><span class="line">生活:</span><br><span class="line">    zh: 生活</span><br><span class="line">    en: Live</span><br><span class="line">    img: &#x2F;images&#x2F;classify&#x2F;live.jpg</span><br><span class="line">·······</span><br></pre></td></tr></table></figure>
<h3 id="2-标签子页面"><a href="#2-标签子页面" class="headerlink" title="2.标签子页面"></a>2.标签子页面</h3><p>在 <strong>/themes/sakura/language/zh-cn.yml</strong> 找到如下代码进行修改</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">#tag</span><br><span class="line"># 标签名即是标题</span><br><span class="line">悦读:</span><br><span class="line">    img: &#x2F;images&#x2F;classify&#x2F;reading.jpg</span><br></pre></td></tr></table></figure>
<h3 id="3-番组"><a href="#3-番组" class="headerlink" title="3.番组"></a>3.番组</h3><p>这个页面对应的配置是在 <strong>/source/bangumi/index.md</strong> 中修改，其中代码如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">layout: bangumi</span><br><span class="line">title: bangumi</span><br><span class="line">comments: false</span><br><span class="line">date: 2019-02-10 21:32:48</span><br><span class="line">keywords:</span><br><span class="line">description:</span><br><span class="line">bangumis:</span><br><span class="line">  - img: http:&#x2F;&#x2F;pic.netbian.com&#x2F;uploads&#x2F;allimg&#x2F;180413&#x2F;121552-152359295246db.jpg</span><br><span class="line">    title: 狐妖小红娘</span><br><span class="line">    status: 追番中</span><br><span class="line">    progress: 100</span><br><span class="line">    jp: 狐妖小红娘</span><br><span class="line">    time: 2019-05-24 SUN.</span><br><span class="line">    desc: 白月初……</span><br><span class="line">  - img: http:&#x2F;&#x2F;pic.netbian.com&#x2F;uploads&#x2F;allimg&#x2F;170605&#x2F;130458-149663909840b3.jpg</span><br><span class="line">    title: 名侦探柯南</span><br><span class="line">    status: 追番中</span><br><span class="line">    progress: 1000</span><br><span class="line">    jp: 名探偵コナン</span><br><span class="line">    time: 2019-05-24 SUN.</span><br><span class="line">    desc: 中生侦探工藤新一……</span><br><span class="line">---</span><br></pre></td></tr></table></figure>
<h3 id="4-歌单"><a href="#4-歌单" class="headerlink" title="4.歌单"></a>4.歌单</h3><p>整个页面配置在 <strong>/source/music/index.md</strong> 中，其代码如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 歌单</span><br><span class="line">date: 2018-12-20 23:14:28</span><br><span class="line">keywords: 喜欢的音乐</span><br><span class="line">description: </span><br><span class="line">comments: true</span><br><span class="line">photos: https:&#x2F;&#x2F;cdn.jsdelivr.net&#x2F;gh&#x2F;honjun&#x2F;cdn@1.4&#x2F;img&#x2F;banner&#x2F;music.jpg</span><br><span class="line">---</span><br><span class="line">&#123;% raw %&#125;</span><br><span class="line">&lt;meting-js</span><br><span class="line">  server&#x3D;&quot;netease&quot;</span><br><span class="line">  type&#x3D;&quot;playlist&quot;</span><br><span class="line">  id&#x3D;&quot;2507814548&quot;</span><br><span class="line">  mutex&#x3D;&quot;true&quot;&gt;</span><br><span class="line">&lt;&#x2F;meting-js&gt;</span><br><span class="line">&#123;% endraw %&#125;</span><br></pre></td></tr></table></figure>
<p>前面是常规的信息配置没什么好说的，photos就是这个页面的顶部图片<br>要改一下id，这个id就是网易云音乐歌单id：登录网页版网易云音乐，打开歌单，在地址栏中可以看到</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https:&#x2F;&#x2F;music.163.com&#x2F;#&#x2F;playlist?id&#x3D;762797776</span><br></pre></td></tr></table></figure>
<ul>
<li>把id后面的数字复制粘贴到代码里面的id后面，就可以显示自己的歌单了</li>
</ul>
<h2 id="十二-友情链接相关配置"><a href="#十二-友情链接相关配置" class="headerlink" title="十二.友情链接相关配置"></a>十二.友情链接相关配置</h2><h3 id="1-内容配置"><a href="#1-内容配置" class="headerlink" title="1.内容配置"></a>1.内容配置</h3><p>友情链接内容配置具体在 <strong>/source/link/index.md</strong> 中</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">photos: https:&#x2F;&#x2F;cdn.jsdelivr.net&#x2F;gh&#x2F;honjun&#x2F;cdn@1.4&#x2F;img&#x2F;banner&#x2F;links.jpg &#x2F;&#x2F;背景图片</span><br><span class="line">links:</span><br><span class="line">  - group: 小伙伴们</span><br><span class="line">    desc: 欢迎交换友链 ꉂ(ˊᗜˋ)</span><br><span class="line">    items:</span><br><span class="line">    - url: https:&#x2F;&#x2F;yremp.github.io</span><br><span class="line">      img: https:&#x2F;&#x2F;cloud.moezx.cc&#x2F;Picture&#x2F;svg&#x2F;landscape&#x2F;fields.svg</span><br><span class="line">      name: 好友1</span><br><span class="line">      desc: 点击查看</span><br><span class="line">---</span><br></pre></td></tr></table></figure>
<h3 id="2-界面布局"><a href="#2-界面布局" class="headerlink" title="2.界面布局"></a>2.界面布局</h3><p>界面背景及布局主要在 <strong>/themes/sakura/layout/links.ejs</strong> 中</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">........</span><br><span class="line">&lt;p&gt;</span><br><span class="line">  欢迎交换友链qaq ꉂ(ˊᗜˋ)&lt;&#x2F;p&gt;</span><br><span class="line">&lt;p&gt;</span><br><span class="line">请留言告诉我你的：</span><br><span class="line">  &lt;br&gt; 1、名字</span><br><span class="line">  &lt;br&gt; 2、一句话介绍（熟人我会亲自帮写的）</span><br><span class="line">  &lt;br&gt; 3、主页地址</span><br><span class="line">  &lt;br&gt; 4、头像（HTTPS*，可在评论区上传）</span><br><span class="line">&lt;&#x2F;p&gt;</span><br><span class="line">........</span><br></pre></td></tr></table></figure>
<h2 id="十三-左下角播放器"><a href="#十三-左下角播放器" class="headerlink" title="十三.左下角播放器"></a>十三.左下角播放器</h2><p>设置自己的歌单 ，和清单里的歌单一样要先拿到网易歌单id，怎么获取上面清单子页面里有相关介绍，然后在 <strong>/themes/sakura/config.yml</strong> 中找到修改id</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">player: </span><br><span class="line">  id: 762797776</span><br><span class="line">  server: netease</span><br><span class="line">  type: playlist</span><br><span class="line">  fixed: true</span><br><span class="line">  autoplay: false</span><br><span class="line">  loop: all</span><br><span class="line">  order: random</span><br><span class="line">  preload: none</span><br><span class="line">  volume: 0.7</span><br><span class="line">  mutex: true</span><br></pre></td></tr></table></figure>
<h2 id="十四-评论不在白名单问题"><a href="#十四-评论不在白名单问题" class="headerlink" title="十四.评论不在白名单问题"></a>十四.评论不在白名单问题</h2><p>首先，和评论相关的配置在 <strong>/themes/sakura/config.yml</strong> 中</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"># Valine</span><br><span class="line">valine: true</span><br><span class="line">v_appId: Qtrxu5pUbpfjbn2CpMH1jetC-gzGzoHsz</span><br><span class="line">v_appKey: 72NpGpYhuAYcKyDhYSOFE1b2</span><br></pre></td></tr></table></figure>
<p>这里面的id和Key是需要修改的，因为这是我的v_appId和v_appKey，你需要去注册 <strong>leancloud</strong> ，具体的请自行百度。只提醒一点，注册完以后 ，申请app以后，要设置 白名单。</p>
<h2 id="十五-如何添加分类和标签"><a href="#十五-如何添加分类和标签" class="headerlink" title="十五.如何添加分类和标签"></a>十五.如何添加分类和标签</h2><p>先在主题下的 <strong>/themes/sakura/config.yml</strong> 添加分类这里以 <em><strong>自定义</strong></em> 为例</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">menus:</span><br><span class="line">  首页: &#123; path: &#x2F;, fa: fa-fort-awesome faa-shake &#125;</span><br><span class="line">  分类: &#123; path: javascript:;, fa: fa-folder-open faa-wrench, submenus: &#123; </span><br><span class="line">    技术: &#123;path: &#x2F;categories&#x2F;技术&#x2F;, fa: fa-code &#125;, </span><br><span class="line">    生活: &#123;path: &#x2F;categories&#x2F;生活&#x2F;, fa: fa-file-text-o &#125;, </span><br><span class="line">    资源: &#123;path: &#x2F;categories&#x2F;资源&#x2F;, fa: fa-cloud-download &#125;, </span><br><span class="line">    随想: &#123;path: &#x2F;categories&#x2F;随想&#x2F;, fa: fa-commenting-o &#125;,</span><br><span class="line">  &#125; &#125;</span><br><span class="line">  自定义: &#123; path: &#x2F;archives&#x2F;, fa: fa-calendar-times-o faa-tada &#125;</span><br><span class="line">  兴趣: &#123; path: javascript:;, fa: fa-list-ul faa-vertical, submenus: &#123; </span><br><span class="line">    书单: &#123;path: &#x2F;tags&#x2F;悦读&#x2F;, fa: fa-book &#125;, </span><br><span class="line">    番组: &#123;path: &#x2F;bangumi&#x2F;, fa: fa-film &#125;, </span><br></pre></td></tr></table></figure>
<p>然后在主题的 <strong>/themes/sakura/languages/zh-cn.yml</strong> 添加如下所示配置</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">技术:</span><br><span class="line">    #中文标题</span><br><span class="line">    zh: 技术协会</span><br><span class="line">    #英文标题</span><br><span class="line">    en: technology</span><br><span class="line">    # 封面图片</span><br><span class="line">    img: &#x2F;images&#x2F;classify&#x2F;coding.jpg</span><br><span class="line">生活:</span><br><span class="line">    zh: 生活</span><br><span class="line">    en: Live</span><br><span class="line">    img: &#x2F;images&#x2F;classify&#x2F;live.jpg</span><br><span class="line">自定义:</span><br><span class="line">    zh: 资源</span><br><span class="line">    en: Resources</span><br><span class="line">    img: &#x2F;images&#x2F;classify&#x2F;resources.jpg</span><br></pre></td></tr></table></figure>
<p>*最后在写博客时添加这个分类，如果这个分类下没有文章点击就会404<br>*标签和这个分类操作基本一致</p>
<h2 id="十六-搜索功能无法使用"><a href="#十六-搜索功能无法使用" class="headerlink" title="十六.搜索功能无法使用"></a>十六.搜索功能无法使用</h2><p>在博客根目录下执行以下代码</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-json-content --save</span><br></pre></td></tr></table></figure>
<h2 id="十七-参考文献"><a href="#十七-参考文献" class="headerlink" title="十七.参考文献"></a>十七.参考文献</h2><ul>
<li><a target="_blank" rel="noopener" href="https://yremp.live/hexo-sakura/" title="Hexo Sakura使用教程">Hexo Sakura使用教程</a></li>
</ul>

        </div>
        <!-- .entry-content -->
        <div class="single-reward">
          <div class="reward-open">赏
            <div class="reward-main">
              <ul class="reward-row">
                <li class="alipay-code"><img src="/images/donate/AliPayQR.jpg"></li>
                <li class="wechat-code"><img src="/images/donate/WeChatQR.jpg"></li>
              </ul>
            </div>
          </div>
        </div>
        <div style="text-align:center; width: 100%" class="social-share share-mobile" data-disabled="diandian, tencent"></div>
        <footer class="post-footer">
          <div class="post-lincenses"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="nofollow"><i class="fa fa-creative-commons" aria-hidden="true"></i> 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a></div>
          <div class="post-tags">
          </div>
          <div class="post-share">
            <div class="social-share sharehidden share-component"></div>
            <i class="iconfont show-share icon-forward"></i>
          </div>
        </footer><!-- .entry-footer -->
      </article>
      <!-- #post-## -->
      <div class="toc" style="background: none;"></div>
      <section class="post-squares nextprev">
        
        
          
            <div class="post-nepre full next">
          
            <a href="/2020/07/31/hexo-Blog/" rel="next">
              <div class="background">
                <img class="lazyload" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg" data-src="/images/az/demo.png" style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;" onerror="imgError(this,3)" src="/images/az/demo.png">
              </div>
              <span class="label">
              下一篇 </span>
              <div class="info">
                <h3>
                Hexo安装及使用教程</h3>
                <hr>
              </div>
            </a>
          </div>
        
      </section>
      
<div id="vcomments"></div>
<script>
  window.onload = function(){
      var valine = new Valine();
      valine.init({
        el: '#vcomments',
        appId: "4L0A8uj9wCovgVFfLu7xHuGi-gzGzoHsz",
        appKey: "MJiSk3Pctl8GKzoA3n1dGLQJ",
        path: window.location.pathname,
        placeholder: "你是我一生只会遇见一次的惊喜 ..."
      })
  }
</script>

      <section class="author-profile">
        <div class="info" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
          <a target="_blank" rel="noopener" href="https://aill.gitee.io" class="profile gravatar"><img src="/images/avatar.png" itemprop="image" alt="LiuLiu" height="70" width="70"></a>
          <div class="meta">
            <span class="title">Author</span>
            <h3 itemprop="name">
            <a target="_blank" href="https://aill.gitee.io" itemprop="url" rel="author noopener">LiuLiu</a>
            </h3>
          </div>
        </div>
        <hr>
        <p><i class="iconfont icon-write"></i>不积跬步，无以至千里！</p>
      </section>
    </main><!-- #main -->
  </div><!-- #primary -->
</div>



    </div>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="请输入关键词..."/>
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            // PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
    <!-- <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 LiuLiu<br>
      powered_by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer> -->
<footer id="colophon" class="site-footer" role="contentinfo">
  <div class="site-info">
    <div class="footertext">
      <div class="img-preload">
        <img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/wordpress-rotating-ball-o.svg">
        <img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/disqus-preloader.svg">
      </div>
      <p style="color: #666666;">&copy 2020 LiuLiu</p>
    </div>
    <div class="footer-device">
    <p style="font-family: 'Ubuntu', sans-serif;">
        <span style="color: #b9b9b9;">This <a href="http://aill.gitee.io/" target="_blank" style="color: #b9b9b9;;text-decoration: underline dotted rgba(0, 0, 0, .1);">Website </a> <i class="iconfont icon-sakura rotating" style="color: #ffc0cb;display:inline-block"></i> by <a href="http://aill.gitee.io/" target="_blank" style="color: #b9b9b9;;text-decoration: underline dotted rgba(0, 0, 0, .1);">LiuLiu</a></a>, Powered by Hexo, Hosted by Coding Pages</a>
        </span>
      </p>
    </div>
  </div><!-- .site-info -->
</footer>



<!-- <script src="/js/tocbot.js"></script> -->
<script type="text/javascript" src="/js/lib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript" src="/js/InsightSearch.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="/js/zoom.min.js"></script>
<script type="text/javascript" src="/js/sakura-app.js"></script>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine@1.3.4/dist/Valine.min.js'></script>
<script src="/js/botui.js"></script>
<!-- 不蒜子 网页计数器 -->
<script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script> -->
<script type="text/javascript">
/* <![CDATA[ */
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  var Poi = {"pjax":"1","movies":{"url": "","name":"","live":"close"},"windowheight":"fixed","codelamp":"close","ajaxurl":"","order":"asc","formpostion":"bottom"};
} else {
  var Poi = {"pjax":"1","movies":{"url": "","name":"","live":"open"},"windowheight":"auto","codelamp":"close","ajaxurl":"","order":"asc","formpostion":"bottom"};
}
/* ]]> */

</script>
<script>
$(document).ready(function() {
  if ($(".toc").length > 0 && document.body.clientWidth > 1200) {
    if ($(".pattern-center").length > 0) { //有图的情况
      tocbot.init({
          // Where to render the table of contents.
          tocSelector: '.toc', // 放置目录的容器
          // Where to grab the headings to build the table of contents.
          contentSelector: '.entry-content', // 正文内容所在
          // Which headings to grab inside of the contentSelector element.
          scrollSmooth: true,
          headingSelector: 'h1, h2, h3, h4, h5', // 需要索引的标题级别
          headingsOffset: -400,
          scrollSmoothOffset: -85
      });
    } else {
      tocbot.init({
          // Where to render the table of contents.
          tocSelector: '.toc', // 放置目录的容器
          // Where to grab the headings to build the table of contents.
          contentSelector: '.entry-content', // 正文内容所在
          // Which headings to grab inside of the contentSelector element.
          scrollSmooth: true,
          headingSelector: 'h1, h2, h3, h4, h5', // 需要索引的标题级别
          headingsOffset: -85,
          scrollSmoothOffset: -85
      });
    }
    var offsetTop = $('.toc').offset().top - 95;
    window.onscroll = function() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop >= offsetTop) {
        $('.toc').addClass('toc-fixed');
      } else {
        $('.toc').removeClass('toc-fixed');
      }
    }
  }
});
</script>
<!-- 🌸飘落 -->
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/sakura.js"></script>

    <div class="openNav no-select" style="height: 50px;">
      <div class="iconflat no-select" style="width: 50px; height: 50px;">
        <div class="icon"></div>
      </div>
      <div class="site-branding search-form-submit">
        <i class="iconfont js-toggle-search iconsearch icon-search"></i>
      </div>
    </div>
  </section>
  <!-- 实现换肤功能 -->
  <div class="skin-menu no-select" id="mainskin" style="position: fixed">
  <div class="theme-controls row-container">
   <ul class="menu-list">
    <li id="white-bg"> <i class="fa fa-television" aria-hidden="true"></i></li>
    <li id="sakura-bg"> <i class="iconfont icon-sakura"></i></li>
    <li id="gribs-bg"> <i class="fa fa-slack" aria-hidden="true"></i></li>
    <li id="KAdots-bg"> <i class="iconfont icon-dots"></i></li>
    <li id="totem-bg"> <i class="fa fa-optin-monster" aria-hidden="true"></i></li>
    <li id="pixiv-bg"> <i class="iconfont icon-pixiv"></i></li>
    <li id="bing-bg"> <i class="iconfont icon-bing"></i></li>
    <li id="dark-bg"> <i class="fa fa-moon-o" aria-hidden="true"></i></li>
   </ul>
  </div>
 </div>
 <canvas id="night-mode-cover"></canvas>
 
  <div class="changeSkin-gear no-select">
    <div class="keys" id="setbtn"> 
     <span id="open-skinMenu"> 主题  
       <i class="iconfont icon-gear inline-block rotating"></i> 
     </span>
    </div>
  </div>
  <div id="mo-nav" class="">
  <div class="m-avatar">
    <img src="/images/avatar.png">
  </div>
  <p style="text-align: center; color: #333; font-weight: 900; font-family: 'Ubuntu', sans-serif; letter-spacing: 1.5px">六六の小屋</p>
  <p style="text-align: center; word-spacing: 20px;">
    
      
        <a href="https://wpa.qq.com/msgrd?v=3&uin=2403988624&site=qq&menu=yes" class="fa fa-qq" target="_blank" style="color: #25c6fe; margin-left:20px"></a>
      
        <a href="https://space.bilibili.com/13503064" class="fa fa-television" target="_blank" style="color: #ffb6c1; margin-left:20px"></a>
      
        <a href="https://weibo.com/u/3125196513?refer_flag=1001030103_&is_all=1" class="fa fa-weibo" target="_blank" style="color: #dd4b39; margin-left:20px"></a>
      
    
  </p>
  <ul id="menu-new-1" class="menu">
    
      <li>
        <a href="/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-fort-awesome faa-shake" aria-hidden="true"></i>
            首页
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="javascript:;">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-folder-open faa-wrench" aria-hidden="true"></i>
            分类
          </span>
        </a>
        
          <ul class="sub-menu">
            
              <li>
                <a href="/categories/%E6%8A%80%E6%9C%AF/">
                  <i class="fa fa-code" aria-hidden="true"></i>
                  技术
                </a>
              </li>
            
              <li>
                <a href="/categories/%E7%94%9F%E6%B4%BB/">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                  生活
                </a>
              </li>
            
              <li>
                <a href="/categories/%E8%B5%84%E6%BA%90/">
                  <i class="fa fa-cloud-download" aria-hidden="true"></i>
                  资源
                </a>
              </li>
            
              <li>
                <a href="/categories/%E9%9A%8F%E6%83%B3/">
                  <i class="fa fa-commenting-o" aria-hidden="true"></i>
                  随想
                </a>
              </li>
            
          </ul>
        
      </li>
    
      <li>
        <a href="javascript:;">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-list-ul faa-vertical" aria-hidden="true"></i>
            兴趣
          </span>
        </a>
        
          <ul class="sub-menu">
            
              <li>
                <a href="/tags/%E6%82%A6%E8%AF%BB/">
                  <i class="fa fa-book" aria-hidden="true"></i>
                  书单
                </a>
              </li>
            
              <li>
                <a href="/bangumi/">
                  <i class="fa fa-film" aria-hidden="true"></i>
                  番组
                </a>
              </li>
            
              <li>
                <a href="/music/">
                  <i class="fa fa-headphones" aria-hidden="true"></i>
                  歌单
                </a>
              </li>
            
              <li>
                <a href="/photos/">
                  <i class="fa fa-photo" aria-hidden="true"></i>
                  图集
                </a>
              </li>
            
          </ul>
        
      </li>
    
      <li>
        <a href="/archives/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-calendar-times-o faa-tada" aria-hidden="true"></i>
            时间轴
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/comment/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-pencil-square-o faa-tada" aria-hidden="true"></i>
            留言板
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/links/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-link faa-shake" aria-hidden="true"></i>
            友人帐
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/donate/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-thumbs-up faa-shake" aria-hidden="true"></i>
            赞赏
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/about/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-leaf faa-wrench" aria-hidden="true"></i>
            关于
          </span>
        </a>
        
          <ul class="sub-menu">
            
              <li>
                <a href="/./love/">
                  <i class="fa fa-heart" aria-hidden="true"></i>
                  唯爱
                </a>
              </li>
            
              <li>
                <a href="/lab/">
                  <i class="fa fa-cogs" aria-hidden="true"></i>
                  Lab
                </a>
              </li>
            
          </ul>
        
      </li>
    
      <li>
        <a href="/client/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-android faa-vertical" aria-hidden="true"></i>
            APP
          </span>
        </a>
        
      </li>
    
  </ul>
  <p style="text-align: center; font-size: 13px; color: #b9b9b9;">&copy 2020 LiuLiu</p>
</div>
<button onclick="topFunction()" class="mobile-cd-top" id="moblieGoTop" title="Go to top" style="display: none;"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<style>
  .aplayer .aplayer-lrc {
    height: 35px;
  }
  .aplayer .aplayer-lrc p{
    font-size: 16px;
    font-weight: 700;
    line-height: 18px !important;
  }
  .aplayer .aplayer-lrc p.aplayer-lrc-current{
    color: #FF1493;
  }
  .aplayer.aplayer-narrow .aplayer-body{
    left: -66px !important;
  }
  .aplayer.aplayer-fixed .aplayer-lrc {
    display: none;
  }
  .aplayer .aplayer-lrc.aplayer-lrc-hide {
      display:none !important;
  }
  .aplayer.aplayer-fixed .lrc-show {
    display: block;
    background: rgba(255, 255, 255, 0.8);
  }
</style>
<meting-js

    id="2507814548"

    server="netease"

    type="playlist"

    fixed="true"

    autoplay="false"

    loop="all"

    order="random"

    preload="auto"

    volume="0.7"

    mutex="true"

</meting-js>
<script>
  $(function(){
    $('body').on('click', '.aplayer', function(){
      if($('.aplayer-button').hasClass('aplayer-play')) {
        $('.aplayer-lrc').removeClass('lrc-show');
      } else {
        $('.aplayer-lrc').addClass('lrc-show');
      }
    })
  });
</script>
</body>

</html>